<template>
  <div>
     <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区-->
    <el-card>
      <el-table :data="dataList" border stripe size="mini">
        <el-table-column label="#" prop="id"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.lev==1">一级</el-tag>
            <el-tag v-else-if="scope.row.lev==2" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageIndex"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        pageIndex: 1,
        pageSize: 10,
        query: ''
      },
      dataList: [],
      total: 0
    }
  },
  methods: {
    // 数据加载
    async getRightsList () {
      const { data: res } = await this.$http.get('api/rights/list', { params: this.queryInfo })
      var result = JSON.parse(res)
      if (result.meta.status !== 200) {
        return this.$msg.error('获取权限失败')
      }
      this.dataList = result.data
      this.total = result.total
    },
    handleSizeChange (index) {
      // console.log('handleSizeChange', index)
      this.queryInfo.pageSize = index
      this.getRightsList()
    },
    handleCurrentChange (index) {
      // console.log('handleCurrentChange', index)
      this.queryInfo.pageIndex = index
      this.getRightsList()
    }
  },
  created () {
    this.getRightsList()
  }
}
</script>

<style lang="less" scoped>

</style>
